<template>
  <div class="set-wrapper" ref="wrapper">
    <div class="module-bar">
        <div v-for="section in modules" :key="section.id" @click="changeSection(section.id, section.sectionName, 1)" :class="{'active': currentModuleId === section.id}">{{section.sectionName}}</div>
    </div>
    <div class="section-project">
      <div class="data-wrapper">
        <div class="search-bar clearfix">
          <span style="cursor:pointer;font-weight: bold;" @click="changeSection(currentModuleId, currentModuleName, 1)">{{currentModuleName}}</span>
          <span v-if="currentLevel === 2">/</span>
          <span style="cursor:pointer;font-weight: bold;" @click="changeSection(currentSectionId, currentSectionName, 2)" v-if="currentLevel === 2">{{currentSectionName}}</span>
          <span style="float:right;color: rgb(51, 102, 153); cursor:pointer;" @click="openItemDialog(false)">{{currentLevel === 1? '添加栏目': '添加课题'}}</span>
        </div>
        <div class="data-header">
          <div style="width: 20%;min-width: 150px;">{{currentLevel === 1? '栏目名称': '课题名称'}}</div>
          <div style="width: 15%;min-width: 100px;">{{currentLevel === 1? '所属版块': '所属栏目'}}</div>
          <div style="width: 20%;min-width: 150px;">管理员</div>
          <div style="width: 20%;min-width: 150px;">发表人</div>
          <div style="width: 20%;min-width: 150px;">订阅人</div>
          <div style="width: 10%;min-width: 150px;">操作</div>
        </div>
        <div v-for="item in tableData" :key="item.id" class="list-item">
          <div v-if="currentLevel === 1" style="width: 20%;cursor: pointer;" @click="changeSection(item.id, item.sectionName, 2)">{{item.sectionName}}</div>
          <div v-if="currentLevel === 2" style="width: 20%;">{{item.sectionName}}</div>
          <div style="width: 15%;min-width: 100px;">{{getModule(item.sectionParentId)}}</div>
          <div style="width: 20%;min-width: 150px;">
            <span style="width: 80%; display:inline-block; overflow:hidden;text-overflow:ellipsis;;white-space: nowrap;">{{item.sectionManageUsername === ''? '所有人员': item.sectionManageUsername}}</span>
          </div>
          <div style="width: 20%;min-width: 150px;">
            <span style="width: 80%; display:inline-block; overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.sectionPublisher === ''? '所有人员': item.sectionPublisherName}}</span>
          </div>
          <div style="width: 20%;min-width: 150px;">
            <span style="width: 80%; display:inline-block; overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.sectionUsername === ''? '所有人员': item.sectionUsername}}</span>
          </div>
          <div style="width: 10%;min-width: 150px;">
            <el-button @click="openItemDialog(item)" type="text" size="small">编辑</el-button>
            <el-button @click="removeItem(item)" type="text" size="small">删除</el-button>
          </div>
        </div>
        <div class="empty-tr" v-if="tableData.length === 0">暂无数据</div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="itemDialog" width="600px" :close-on-click-modal="false"> 
      <el-form :model="form" style="padding-right:100px;padding-left: 50px;" label-width="120px">
        <el-form-item v-if="currentLevel === 1" label="栏目名称：">
          <el-input v-model="form.sectionName"></el-input>
        </el-form-item>
        <el-form-item v-if="currentLevel === 2" label="课题名称：">
          <el-input v-model="form.sectionName"></el-input>
        </el-form-item>
        <el-form-item label="管理员：">
          <el-tooltip class="item" effect="dark" :disabled="form.managerIds.length === 0" :content="form.sectionManageUsername" placement="bottom">
            <el-input placeholder="请选择" style="width: 210px;" v-model="form.sectionManageUsername" :disabled="true"></el-input>
          </el-tooltip>
          <el-button @click="selectDingUsers('managerIds','sectionManageUsername','sectionManageUserid')">选择</el-button>
        </el-form-item>
        <el-form-item label="发表人：">
          <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointPublisher" :label="false" @change="resetSelect('appointPublisherIds', 'sectionPublisherName', 'sectionPublisher')">所有人员</el-radio>
          <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointPublisher" :label="true" @change="resetSelect('appointPublisherIds', 'sectionPublisherName', 'sectionPublisher')">指定人员</el-radio>
          <el-tooltip v-if="form.appointPublisher" class="item" effect="dark" :disabled="form.appointPublisherIds.length === 0" :content="form.sectionPublisherName" placement="bottom">
            <el-input placeholder="请选择" style="width: 210px;" v-model="form.sectionPublisherName" :disabled="true"></el-input>
          </el-tooltip>
          <el-button v-if="form.appointPublisher" @click="selectDingUsers('appointPublisherIds','sectionPublisherName','sectionPublisher')">选择</el-button>
        </el-form-item>
        <el-form-item label="订阅人：">
          <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointSubscriber" :label="false" @change="resetSelect('appointSubscriberIds', 'sectionUsername', 'sectionUserid')">所有人员</el-radio>
          <el-radio :disabled="form.sectionLevel === '0'" v-model="form.appointSubscriber" :label="true" @change="resetSelect('appointSubscriberIds', 'sectionUsername', 'sectionUserid')">指定人员</el-radio>
          <el-tooltip v-if="form.appointSubscriber" class="item" effect="dark" :disabled="form.appointSubscriberIds.length === 0" :content="form.sectionUsername" placement="bottom">
            <el-input placeholder="请选择" style="width: 210px;" v-model="form.sectionUsername" :disabled="true"></el-input>
          </el-tooltip>
          <el-button v-if="form.appointSubscriber" @click="selectDingUsers('appointSubscriberIds', 'sectionUsername', 'sectionUserid')">选择</el-button>
        </el-form-item>
        <el-form-item label="栏目范围：">
          <el-radio v-model="form.sectionRange" label="0">所有人员</el-radio>
          <el-radio v-model="form.sectionRange" label="1">指定人员</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="itemDialog = false">取 消</el-button>
        <el-button type="primary" @click="addItem">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
        title: '栏目管理',
        formStatus: 'add',
        itemDialog: false,
        form: {
          id: '',
          appointPublisher: false,
          appointSubscriber: false,
          sectionLevel: '1',
          sectionManageUserid: '',
          sectionManageUsername: '',
          managerIds: [],
          sectionName: '',
          sectionParentId: '',
          sectionUserid: '',
          sectionUsername: '',
          sectionPublisher: '',
          sectionPublisherName: '',
          appointPublisherIds: [],
          appointSubscriberIds: [],
          sectionRange: ''
        },
        formVerify: {
          sectionParentId: '请选择版块',
          sectionName: '请输入栏目或版块名称',
          sectionManageUsername: '请选择管理员',
        },
        tableData: [],
        modules: [],
        sections: [],
        parentid: '',
        currentSectionId: '0',
        currentSectionName: '',
        currentModuleName: '公告',
        currentModuleId: '0',
        currentLevel: 1
      }
    },
    mixins: [dingMixin],
    async mounted(){
      this.$refs.wrapper.style.height = document.documentElement['clientHeight'] - 162 + 'px';
      window.onresize = () => {
        this.$refs.wrapper.style.height = document.documentElement['clientHeight'] - 162 + 'px';
      }
      this.modules = await this.$httpN.postQ('community/section/list', {'parentid': null})
      this.searchItem();
    },
    methods: {
      selectDingUsers(ids, name, idsStr){
        this.complexPicker(300, [], this.form[ids]).then((data)=>{
          this.form[ids] = data.map(item => item.emplId);
          let names = data.map(item => item.name);
          this.form[name] = names.join(',');
          this.form[idsStr] = this.form[ids].join(',')
        })
      },
      resetSelect(ids, name, idsStr) {
        this.form[ids] = [];
        this.form[name] = '';
        this.form[idsStr] = '';
      },
      async searchItem() {
        let data = await this.$httpN.postQ('community/section/list', {'parentid': this.currentSectionId})
        if(this.currentLevel === 1) this.sections = formUtil.deepCopy(data);
        this.tableData = data;
      },
      async addItem() {
        this.form.sectionName = this.form.sectionName.trim()
        if(this.currentLevel === 1) {
          this.form.sectionParentId = this.currentModuleId;
        }else{
          this.form.sectionParentId = this.currentSectionId;
        }

        if(!formUtil.verifyData(this.form, this.formVerify)) return;
        if(this.form.sectionName.length > 8) return this.$message.error('栏目名称长度不能超过8个字')
        let postForm = {
          sectionLevel: this.currentLevel,
          sectionManageUserid: this.form.sectionManageUserid,
          sectionManageUsername: this.form.sectionManageUsername,
          sectionName: this.form.sectionName,
          sectionParentId: this.form.sectionParentId,
          sectionUserid: this.form.sectionUserid,
          sectionUsername: this.form.sectionUsername,
          sectionPublisher: this.form.sectionPublisher,
          sectionPublisherName: this.form.sectionPublisherName,
          sectionRange: this.form.sectionRange,
        }
        if(this.formStatus === 'edit') postForm.id = this.form.id;
        if(!await this.$httpN.postB(this.formStatus === 'add' ? 'community/section/save': 'community/section/update', postForm)) return;
        this.itemDialog = false;
        formUtil.submitSuccess('保存成功');
        this.searchItem();
      },
      async openItemDialog(item) {
        if(item) {
          let section = await this.$httpN.get('community/section/info/' + item.id);
          section.appointPublisher = section.sectionPublisherName !== '';
          section.appointSubscriber = section.sectionUsername !== '';
          section.appointSubscriberIds = section.sectionUserid.split(',');
          section.appointPublisherIds = section.sectionPublisher.split(',');
          section.managerIds = section.sectionManageUserid.split(',');
          section.sectionLevel = section.sectionLevel + '';
          this.form = section;
          console.log(this.form);
          this.formStatus = 'edit'
        }else {
          formUtil.resetData(this.form);
          this.form.sectionLevel = '1';
          this.form.sectionRange = '0';
          this.formStatus = 'add'
        }
        this.itemDialog = true;
      },
      removeItem(item) {
        formUtil.submitConfirm('此操作将永久删除版块或栏目, 是否继续?', async ()=> {
          if(!await this.$httpN.postQ('community/section/delete', {id: item.id}, false)) return;
          formUtil.submitSuccess('删除成功');
          this.searchItem()
        })
      },
      getModule(id) {
        let moduleName = '';
        let arr = this.currentLevel === 1? this.modules: this.sections;
        arr.every((item) => {
          if(item.id !== id) return true;
          moduleName = item.sectionName;
          return false
        })
        return moduleName
      },
      changeSection(id, name, level) {
        this.currentSectionId = id;
        if(level === 1) {
          this.currentModuleName = name;
          this.currentModuleId = id;
        }else {
          this.currentSectionName = name;
        }
        this.currentLevel = level;
        this.searchItem();
      }
    }
  }
</script>
<style lang="scss" scoped>
  .set-wrapper{
    width: 100%;
    display: flex;
    height: 100%;
    position: relative;
    overflow-y: auto;
    .module-bar{
      padding-top: 50px;
      text-align: center;
      max-width: 200px;
      min-width: 150px;
      width: 12.5%;
      border-right: 1px solid #e8e8e8;
      height: 100%;
      padding-right: 20px;
      div{
        line-height: 50px;
        font-size: 16px;
        cursor: pointer;
        color:#595959;
        font-weight: bold;
        &.active{
          color: #409EFF;
        }
      }
    }
    .section-project{
      flex: 1;
      padding-left: 20px;
    }
    .data-wrapper{
      margin-top: 10px;
      border: 1px solid #e8e8e8;
      border-bottom: none;
      .search-bar{
        padding: 20px;
        height: 52px;
        background: rgba(0,0,0,0);
        border-bottom: 1px solid #e8e8e8;
        border-radius: 2px 2px 0 0;
        .search-btn{
          float:right;
        }
      }
    }
    .data-header{
      height: 48px;
      line-height: 48px;
      padding: 0 20px;
      background: #f1f4f5;
      font-size: 0;
      display:flex;
      min-width: 700px;
      div{
        display:inline-block;
        font-size: 14px;
        color: #8c8c8c;
      }
    }
    .list-item{
      height: 40px;
      padding: 0 20px;
      font-size: 0;
      display:flex;
      min-width: 700px;
      border-bottom: 1px solid #e8e8e8;
      p{
        margin: 0;
      }
      &:hover{
        background: #fafafa;
      }
      div{
        font-size: 14px;
        float:left;
        color:#595959;
        font-weight: 400;
        line-height: 40px;
        overflow:hidden;text-overflow:ellipsis;;white-space: nowrap;
      }
      .first-td{
        line-height: 16px;
        padding: 12px 0;
        padding-right: 50px;
        .title{
          font-weight: bold;
          overflow:hidden;
          height: 16px;
        }
        .desc{
          height: 32px;
          margin: 5px 0;
          font-size:12px;
          word-break: break-all;
          overflow: hidden;
        }
        .module{
          font-size: 12px;
        }
      }
    }
  }
  .empty-tr{
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #e8e8e8;
    &:hover{
      background: #fafafa;
    }
  }
</style>